<template>
  <div class="supplier-order-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" ref="filterTable" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button class="gray-outline" @click="match" v-if="currentIndex == 20 && $authPass('procurement.supplier.purchase.order.audit')">批量接单</a-button>
          <a-button class="gray-outline" @click="openDeliveryOrderModal('mul')" v-if="(currentIndex == 30 || currentIndex == 40) && $authPass('procurement.supplier.delivery.create')">批量交货</a-button>
        </template>
        <template #tableBody>
          <a-table class="table-two-line" ref="tableListref" @selection-change="orderSel" v-model:selected-keys="ids" :span-method="spanMethodAll" row-key="id" :expandable="expandable" :default-expand-all-rows="true" :loading="loading" :row-selection="rowSelection" :bordered="false" :columns="tableColumns" :data="tableList" size="mini" :pagination="false" :scroll="{ y: '100%' }">
            <template #columns>
              <a-table-column v-for="(item, index) of tableColumns" :fixed="item.fixed" :key="index" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
                <template v-if="item.dataIndex == 'sort'" #cell="{ rowIndex }">
                  <p>{{ rowIndex + 1 }}</p>
                </template>
                <template v-else-if="item.dataIndex == 'img'" #cell="{ record }">
                  <!-- <div class="flex-c-sb" style="display: flex; align-items: center"> -->
                  <div style="display: flex; align-items: center">
                    <div class="order-w flex">
                      <div class="order-detail-item" style="width: 200px">
                        <div class="flex-c">
                          <span class="label">采购单号：</span>
                          <span class="cursor highlight" @click="toDetail(record)">{{ record.billNo }}</span>
                          <CopyText class="popup-edit-icon-hover" style="margin-left: 5px" :val="record.billNo" />
                        </div>
                        <p>
                          <span class="label">经销商：</span>
                          <span>{{ record.companyName }}</span>
                        </p>
                      </div>
                      <div class="order-detail-item" style="width: 200px">
                        <p><span class="label">采购员：</span>{{ record.purchaseUname }}</p>
                        <p><span class="label">提交日期：</span>{{ $setTime(record.gmtAudit, 'YYYY/MM/DD HH:mm') }}</p>
                      </div>
                      <div class="order-detail-item" style="width: 200px">
                        <p><span class="label">接单日期：</span>{{ $setTime(record.gmtReceive, 'YYYY/MM/DD HH:mm') }}</p>
                        <p><span class="label">完成日期：</span>{{ $setTime(record.gmtFinished, 'YYYY/MM/DD HH:mm') }}</p>
                      </div>
                      <div class="order-detail-item" style="width: 140px">
                        <p><span class="label">采购数：</span>{{ record.purchaseAmt }}</p>
                        <p><span class="label">截单数：</span>{{ record.cutoffAmt }}</p>
                      </div>
                      <div class="order-detail-item" style="width: 140px">
                        <p><span class="label">实交数：</span>{{ record.deliveryRealAmt }}</p>
                        <p><span class="label">已入库数：</span>{{ record.warehouseRealAmt }}</p>
                      </div>
                      <div class="order-detail-item" style="width: 140px">
                        <!-- <p><span class="label">实交货值：</span>{{ record.deliveryValue }}</p> -->
                        <p><span class="label">采购金额：</span>￥{{ record.purchaseValue }}</p>
                        <p><span class="label">入库金额：</span>￥{{ record.inventoryValue }}</p>
                      </div>
                      <div class="order-detail-item" style="width: 150px">
                        <div class="flex">
                          <span class="label" style="flex-shrink: 0">备注：</span>
                          <p style="width: 100px">
                            <TextLimit>{{ record.remark }}</TextLimit>
                          </p>
                        </div>
                        <a-tag color="arcoblue" size="small" bordered>{{ statusMap[record.status] }}</a-tag>
                      </div>
                    </div>
                    <div class="flex-c">
                      <a-space>
                        <div style="width: 100px; text-align: right">
                          <a-button type="text" @click="openTakeOrderModal(record)" v-if="record.status == 20 && $authPass('procurement.supplier.purchase.order.audit')">接单</a-button>
                          <a-button class="ml10 mr10" type="text" @click="openDeliveryOrderModal('single', record)" v-if="(record.status == 30 || record.status == 40) && $authPass('procurement.supplier.delivery.create')">交货</a-button>
                        </div>
                        <a-dropdown>
                          <icon-more class="table-btn-more" />
                          <template #content>
                            <a-doption @click.stop="toDetail(record)">详情</a-doption>
                            <a-doption @click.stop="openLogList(record)">日志</a-doption>
                          </template>
                        </a-dropdown>
                      </a-space>
                    </div>
                  </div>
                </template>
                <template #title v-else-if="item.dataIndex == 'ssku'">
                  <a-popover content="默认从供应商产品上获取关联的SKU，如果供应商产品没有则空着">
                    <p>
                      <span>供应商SKU</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'sku'">
                  <a-popover content="经销商SKU是指卖家采购单上的SKU">
                    <p>
                      <span>经销商SKU</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>

                <template #title v-else-if="item.dataIndex == 'gmtPlanDelivery'">
                  <a-popover content="期望交期是指经销商希望的交货日期">
                    <p>
                      <span>期望交期</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'purchaseAmt'">
                  <a-popover content="经销商要求的交货数量">
                    <p>
                      <span>采购数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>

                <template #title v-else-if="item.dataIndex == 'cutoffAmt'">
                  <a-popover content="部分交货的采购单，终止了采购单还未到货的就是截单数量">
                    <p>
                      <span>截单数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'deliveryAmt'">
                  <a-popover content="已经生成交货单的数量">
                    <p>
                      <span>已交货数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'deliveryRealAmt'">
                  <a-popover content="交货单实际收到的数量">
                    <p>
                      <span>实际交货数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'warehouseReturnAmt'">
                  <a-popover content="经销商仓库人员在入库时发现不良品退回的数量">
                    <p>
                      <span>退回数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'warehouseRealAmt'">
                  <a-popover content="实际入库的数量">
                    <p>
                      <span>已入库数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'warehouseNotAmt'">
                  <a-popover content="未入库数=采购数-截单数-已入库数">
                    <p>
                      <span>未入库数</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>

                <template #title v-else-if="item.dataIndex == 'price'">
                  <a-popover content="采购单填写的单价">
                    <p>
                      <span>采购单价</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'purchaseValue'">
                  <a-popover content="采购金额=单价*（采购数量-截单数）">
                    <p>
                      <span>采购金额</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'deliveryValue'">
                  <a-popover content="已交货金额=单价*实际交货数">
                    <p>
                      <span>已交货金额</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
                <template #title v-else-if="item.dataIndex == 'inventoryValue'">
                  <a-popover content="入库金额=单价*已入库数">
                    <p>
                      <span>入库金额</span>
                      <icon-question-circle />
                    </p>
                  </a-popover>
                </template>
              </a-table-column>
            </template>
            <template #expand-row="{ record }">
              <a-checkbox-group v-model="itemIdList[record.id]">
                <a-table class="table-singe-line" row-class="child-row" :show-header="false" row-key="id" :bordered="false" :columns="tableColumns" :data="record.billItems" size="mini" :pagination="false">
                  <template #columns>
                    <a-table-column :width="40" />
                    <a-table-column :width="40" #cell="{ record }">
                      <div v-if="currentIndex == 30 || currentIndex == 40">
                        <a-checkbox :value="record.id" />
                      </div>
                    </a-table-column>
                    <a-table-column v-for="(item, index) of tableColumns.filter((e:any) => e.dataIndex != 'sort')" :key="index" :fixed="item.fixed" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
                      <template v-if="item.dataIndex == 'img'" #cell="option">
                        <ImgPopover :src="option.record.productImg">
                          <template #con>
                            <a-image width="40" height="40" fit="contain" :src="option.record.productImg" />
                          </template>
                        </ImgPopover>
                      </template>

                      <template v-else-if="item.dataIndex == 'productName'" #cell="option">
                        <TextLimit position="top">{{ option.record.productName }}</TextLimit>
                      </template>

                      <template v-else-if="item.dataIndex == 'productSpecs'" #cell="option">
                        <TextLimit position="top">{{ getSpecName(option.record) }}</TextLimit>
                      </template>

                      <template v-else-if="item.dataIndex == 'warehouseName'" #cell="option">
                        <TextLimit position="top">{{ option.record.deliveryWarehouseName }}({{ option.record.deliveryWarehouseCode }})</TextLimit>
                      </template>

                      <template v-else-if="item.dataIndex == 'gmtPlanDelivery'" #cell="option">
                        <div>{{ $setTime(option.record.gmtPlanDelivery, 'YYYY/MM/DD') }}</div>
                        <div v-if="option.record.gmtPlanDelivery">
                          <div style="color: red" v-if="!toCheckDay(option.record.gmtPlanDelivery).type">超时{{ toCheckDay(option.record.gmtPlanDelivery).day }}天</div>
                          <div class="highlight" v-else>剩余{{ toCheckDay(option.record.gmtPlanDelivery).day }}天</div>
                        </div>
                      </template>
                      <template v-else-if="item.dataIndex == 'remark'" #cell="option">
                        <TextLimit position="top" v-if="option.record.remark">{{ option.record.remark }}</TextLimit>
                        <span v-else>--</span>
                      </template>

                      <template v-else-if="item.dataIndex == 'price'" #cell="option">
                        <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                        <div>￥{{ option.record.price }}</div>
                      </template>
                      <template v-else-if="item.dataIndex == 'purchaseValue'" #cell="option">
                        <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                        <div>￥{{ option.record.purchaseValue }}</div>
                      </template>
                      <template v-else-if="item.dataIndex == 'deliveryValue'" #cell="option">
                        <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                        <div>￥{{ option.record.deliveryValue }}</div>
                      </template>
                      <template v-else-if="item.dataIndex == 'inventoryValue'" #cell="option">
                        <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                        <div>￥{{ option.record.inventoryValue }}</div>
                      </template>

                      <!-- <template v-else-if="item.dataIndex == 'userSetting'" #cell="option">
                        <a-button type="text">编辑商品</a-button>
                      </template> -->
                    </a-table-column>
                  </template>
                </a-table>
              </a-checkbox-group>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer" v-if="statusCurrentIndex != 11">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>

  <TakeOrder ref="takeOrder" :info="orderInfo" @save="getList" />
  <MatchTakeOrder ref="matchTakeOrder" :ids="ids" @save="saveMatchTakeOrder" />
  <CreateDeliveryOrder ref="createDeliveryOrder" :type="isMatchType" :list="submitOrderList" @save="getList" />
  <SupplierOrderDetail ref="supplierOrderDetail" :info="orderInfo" />
  <CommonLogsDialog v-if="showLogDialog" api="findSupplierPurchaseLogPage" :id="orderInfo.id" :isShow="showLogDialog" @closed="showLogDialog = false" />
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRef, toRefs, watch } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { findWarehouseListByParam } from '@/api/warehouse'
  import { findPurchasePlanPage } from '@/api/purchase'
  import { findSupplierPurchasePage } from '@/api/supplier'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import TakeOrder from './takeOrder.vue'
  import MatchTakeOrder from './matchTakeOrder.vue'
  import CreateDeliveryOrder from './createDeliveryOrder.vue'
  import SupplierOrderDetail from './supplierOrderDetail.vue'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      FilterTable,
      TableWrap,
      TakeOrder,
      MatchTakeOrder,
      CreateDeliveryOrder,
      SupplierOrderDetail,
      CommonLogsDialog,
    },
    props: ['currentIndex', 'getNum'],
    setup(props: any, { emit }) {
      const takeOrder = ref()
      const matchTakeOrder = ref()
      const createDeliveryOrder = ref()
      const supplierOrderDetail = ref()
      const data: any = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'billNos',
            keyItems: [{ label: '采购单号', value: 'billNos' }],
            keyWidth: '100',
            value: ref(),
            placeholder: '请输入',
            label: '采购单号',
            width: 160,
            isMultiple: true,
          },
          {
            type: 'input_keyword',
            key: 'skus',
            keyItems: [
              { label: 'SKU', value: 'sskus' },
              { label: '产品名称', value: 'productName' },
              { label: '客户SKU', value: 'skus' },
            ],
            keyWidth: '100',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 160,
            isMultiple: true,
          },
          {
            key: 'warehouseCode',
            label: '交货仓库',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            key: 'companyName',
            label: '客户名称',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            type: 'keyword_date_range',
            key: 'gmtAudit',
            keyItems: [
              { label: '提交日期', value: 'gmtAudit' },
              { label: '接单日期', value: 'gmtReceive' },
              { label: '期望交期', value: 'gmtPlanDelivery' },
              { label: '交完日期', value: 'gmtDelivery' },
            ],
            keyWidth: '110',
            value: ref(),
            placeholder: '请输入',
            label: '提交日期',
            width: 200,
          },
        ],
        tableColumns: [
          {
            title: '序号',
            dataIndex: 'sort',
            width: 40,
          },

          {
            title: '图片',
            dataIndex: 'img',
            width: 60,
          },
          {
            title: '产品名称',
            dataIndex: 'productName',
            width: 120,
          },
          {
            title: '供应商SKU',
            dataIndex: 'ssku',
            width: 140,
          },
          {
            title: '经销商SKU',
            dataIndex: 'sku',
            width: 140,
          },
          {
            title: '规格',
            dataIndex: 'productSpecs',
            width: 140,
          },
          // {
          //   title: '交货仓库',
          //   dataIndex: 'warehouseName',
          //   width: 120,
          // },
          {
            title: '期望交期',
            dataIndex: 'gmtPlanDelivery',
            width: 140,
          },
          {
            title: '采购数',
            dataIndex: 'purchaseAmt',
            width: 70,
          },
          {
            title: '截单数',
            dataIndex: 'cutoffAmt',
            width: 70,
          },
          {
            title: '已交货数',
            dataIndex: 'deliveryAmt',
            width: 80,
          },
          {
            title: '实际交货数',
            dataIndex: 'deliveryRealAmt',
            width: 100,
          },
          {
            title: '退回数',
            dataIndex: 'warehouseReturnAmt',
            width: 70,
          },
          {
            title: '已入库数',
            dataIndex: 'warehouseRealAmt',
            width: 80,
          },
          {
            title: '未入库数',
            dataIndex: 'warehouseNotAmt',
            width: 80,
          },
          {
            title: '备注',
            dataIndex: 'remark',
            width: 80,
          },

          {
            title: '含税单价',
            dataIndex: 'price',
            width: 80,
          },
          {
            title: '采购货值',
            dataIndex: 'purchaseValue',
            width: 80,
          },
          {
            title: '已交货金额',
            dataIndex: 'deliveryValue',
            width: 100,
          },
          {
            title: '入库货值',
            dataIndex: 'inventoryValue',
            width: 80,
          },
          // {
          //   title: '操作',
          //   dataIndex: 'userSetting',
          //   width: 80,
          // },
        ],
        tableList: [],
        searchValue: {},
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        loading: false,
        expandable: {
          title: '',
          defaultExpandAllRows: true,
          expandedRowKeys: [],
          width: 10,
        },
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        statusMap: {
          '20': '待接单',
          '30': '待交货',
          '40': '交货中',
          '50': '已交货',
          '60': '已完成',
          '70': '已取消',
        },
        ids: [],
        orderInfo: {},
        isMatchType: '',
        itemIdList: {},
        submitOrderList: [],
        showLogDialog: false,
      })

      const searchByVal = (info: any) => {
        data.searchValue = {}
        data.searchValue = info
        if (data.searchValue.startDate) {
          data.searchValue.startDate = `${data.searchValue.startDate} 00:00:00`
          data.searchValue.endDate = `${data.searchValue.endDate} 23:59:59`
        }
        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          status: props.currentIndex,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        // data.loading = false
        const res: any = await findSupplierPurchasePage(params)
        let arr = res?.data?.records || []
        data.tableList = arr
        data.pageNation.total = res?.data?.total
        data.expandable.expandedRowKeys = data.tableList.map((el: any) => el.id)
        data.loading = false
        data.itemIdList = {}
        data.tableList.forEach((e: any) => {
          data.itemIdList[e.id] = []
        })
        props.getNum()
      }

      const getWareHouseList = async () => {
        const res = await findWarehouseListByParam()
        let arr = res?.data
        arr.map((e: any) => {
          e.label = e.warehouseName
          e.value = e.warehouseCode
        })
        data.filterItem[2].optionItems = arr
      }

      // 合并单元格
      const spanMethodAll = (option: any) => {
        let { column } = option
        if (column.dataIndex === 'img') {
          return { rowspan: 1, colspan: 18 }
        }
      }

      const openTakeOrderModal = (item: any) => {
        data.orderInfo = item
        takeOrder.value.visible = true
      }
      const openDeliveryOrderModal = (type: string, item?: any) => {
        let arr: any = []
        data.submitOrderList = []
        if (type == 'mul') {
          let selIdList: any = []

          for (const key in data.itemIdList) {
            selIdList = [...selIdList, ...data.itemIdList[key]]
            data.tableList.forEach((e: any) => {
              if (key == e.id && data.itemIdList[key][0]) {
                arr.push(_.cloneDeep(e))
              }
            })
          }
          if (!selIdList[0]) {
            return Message.error('请选择需要交货的数据')
          }
          arr.forEach((e: any) => {
            let newArrr: any = []
            e.billItems.forEach((el: any, i: number) => {
              // 没选中标识为-1
              let index = selIdList.findIndex((ell: string) => el.id == ell)
              if (index != -1) {
                newArrr.push(el)
              }
              if (i == e.billItems.length - 1) e.billItems = newArrr
            })
          })
          data.submitOrderList = arr
        } else {
          data.submitOrderList.push(item)
        }
        data.isMatchType = type
        createDeliveryOrder.value.visible = true
      }

      const match = () => {
        if (!data.ids[0]) {
          return Message.error('请先选择订单')
        }
        matchTakeOrder.value.visible = true
      }

      const saveMatchTakeOrder = () => {
        data.ids = []
        data.pageNation.pageNum = 1
        getList()
        props.getNum()
      }

      const orderSel = (list: any) => {
        list.forEach((e: any) => {
          let obj = data.tableList.find((el: any) => el.id == e)
          data.itemIdList[e] = obj.billItems.map((e: any) => e.id)
        })
      }

      const toCheckDay = (time: any) => {
        let date = new Date(time).valueOf() + 24 * 60 * 60 * 1000
        let newDate = new Date().valueOf()
        let timeStr = date - newDate
        if (timeStr < 0) {
          let daty = Math.abs(timeStr) / (24 * 60 * 60 * 1000)
          return {
            type: false,
            day: Math.ceil(daty),
          }
        } else {
          let daty = Math.abs(timeStr) / (24 * 60 * 60 * 1000)
          return {
            type: true,
            day: Math.ceil(daty),
          }
        }
      }

      const toDetail = (item: any) => {
        data.orderInfo = item
        supplierOrderDetail.value.visible = true
      }

      const openLogList = (item: any) => {
        data.orderInfo = item
        data.showLogDialog = true
      }

      const getSpecName = (info: any) => {
        let item: any = info ? JSON.parse(info.productSpecs) : []
        return item.map((e: any) => e.valueCn).join(',')
      }

      watch(
        () => props.currentIndex,
        () => {
          setTimeout(() => {
            data.pageNation.pageNum = 1
            getList()
          }, 200)
        }
      )

      getWareHouseList()
      getList()
      return {
        ...(toRefs(data) as any),
        changePage,
        sizeChange,
        searchByVal,
        spanMethodAll,
        getList,
        takeOrder,
        openTakeOrderModal,
        createDeliveryOrder,
        openDeliveryOrderModal,
        matchTakeOrder,
        match,
        saveMatchTakeOrder,
        orderSel,
        toCheckDay,
        supplierOrderDetail,
        toDetail,
        openLogList,
        getSpecName,
      }
    },
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-td) {
    background-color: var(--color-fill-1);
  }
  :deep(.arco-table-tr-expand) {
    .arco-table-cell {
      padding: 0;
    }
    .arco-table {
      margin: 0 !important;
      .arco-table-td {
        border-bottom: 1px solid var(--color-neutral-3);
      }
    }
    background-color: #fff !important;
  }
  :deep(.child-row) {
    .arco-table-cell {
      padding: 2px 8px;
    }
  }
  :deep(.arco-table-tr-expand .arco-table-td) {
    background-color: #fff !important;
    border-bottom: none;
  }
  :deep(.arco-table-tr-expand tr:hover .arco-table-td) {
    background-color: var(--color-fill-1) !important;
  }
  :deep(.arco-table-expand .arco-table-cell) {
    display: none;
  }
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }

  .supplier-order-con {
    height: calc(100vh - @menuAndTabHeight);
    width: 100%;

    .arco-spin,
    .arco-scrollbar {
      height: 100%;
      width: 100%;
    }

    .my-table {
      .table-title {
        height: 40px;
      }
    }
  }
</style>
